<template>
  <el-form ref="formRef" :inline="true" :model="form" status-icon label-width="80px" label-position="right">
    <el-form-item
      label="用户昵称"
      prop="nickname"
      :rules="[
        { required: true, message: '用户昵称不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: '长度应该是3到5', trigger: 'change' }
      ]"
    >
      <el-input v-model="form.nickname" placeholder="请输入用户昵称" clearable />
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入手机号码" clearable />
    </el-form-item>
    <el-date-picker
      v-model="form.datetime"
      type="date"
      value-format="YYYY-MM-DD"
      :shortcuts="shortcuts"
    />
    <el-select v-model="form.select" clearable style="width: 200px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-form-item>
      <el-button type="primary" @click="submitForm">搜索</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { Time } from 'undraw-ui'

const form = reactive({
  nickname: '',
  phone: '',
  datetime: new Time().value,
  select: ''
})
const formRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  nickname: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: '长度应该是3到5', trigger: 'change' }
  ]
})

const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: new Time().add(-1, 'day')
  },
  {
    text: '一周前',
    value: new Time().add(-1, 'week')
  }
]

const options = [
  {
    value: '1',
    label: '黄金糕'
  },
  {
    value: '2',
    label: '双皮奶',
    disabled: true
  },
  {
    value: '3',
    label: '蚵仔煎'
  },
  {
    value: '4',
    label: '龙须面'
  },
  {
    value: '5',
    label: '北京烤鸭'
  }
]

const submitForm = () => {
  formRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(form)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
